<template>
    <commonPage :showHeader="false">
    <scroller
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
    <div class="all">
        
        <div class="top">
        <div class="aa" :class="check_color == 1? 'checked':''" @click="check_num(1)">
          <p>国家级</p>
        </div>
        <div class="aa" :class="check_color == 2? 'checked':''" @click="check_num(2)">
          <p>省级</p>
        </div>
        <div class="aa" :class="check_color == 3? 'checked':''" @click="check_num(3)">
          <p>市级</p>
        </div>
        <div class="aa" :class="check_color == 4? 'checked':''" @click="check_num(4)">
          <p>区级</p>
        </div>
      </div>
      <div class="content">
        <div v-show="check_color == 1">
            <div class="guojia">
                <div class="cunzhen">
                    <div class="title">
                        <div class="xian"></div>
                        <p>村镇单位</p>
                    </div>
                    <div class="text">
                        <div class="one" v-for="(value1,n1) in obj1" :key="n1">
                            <div class="img">
                                <img src="@/assets/img/house.png" width="100%">
                            </div>
                            <span>{{value1.cun}}</span>
                        </div>   
                    </div>
                    <div class="more">
                        <p>查看更多<van-icon name="arrow-down" color="#7d8a93" /></p>
                    </div>
                </div>

                <div class="bumen">
                    <div class="title">
                        <div class="xian"></div>
                        <p>部门单位</p>
                    </div>
                    <div class="text">
                        <div class="one" v-for="(value2,n2) in obj2" :key="n2">
                            <div class="img">
                                <img src="@/assets/img/house.png" width="100%">
                            </div>
                            <span>{{value2.weiyuan}}</span>
                        </div>   
                    </div>
                    <div class="more">
                        <p>查看更多<van-icon name="arrow-down" color="#7d8a93" /></p>
                    </div>
                </div>

                <div class="xiaoyuan">
                    <div class="title">
                        <div class="xian"></div>
                        <p>文明校园</p>
                    </div>
                    <div class="text">
                        <div class="one" v-for="(value3,n3) in obj3" :key="n3">
                            <div class="img">
                                <img src="@/assets/img/house.png" width="100%">
                            </div>
                            <span>{{value3.zhongxue}}</span>
                        </div>   
                    </div>
                    <div class="more">
                        <p>查看更多<van-icon name="arrow-down" color="#7d8a93" /></p>
                    </div>
                </div>

                <div class="button1">
                    <div class="button1-shenqing">
                        <div>
                            <div><img src="@/assets/img/wmdwshenqing.png" width="100%"></div>
                            <p>文明单位申请</p>
                        </div>
                        
                    </div>
                    <div class="button1-download">
                        <div>
                            <div><img src="@/assets/img/wmdwsqbgdownload.png" width="100%"></div>
                            <p>文明单位申请表格下载</p>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

        <div v-show="check_color == 2">
            <div>
                这里是省级的内容
            </div>
        </div>

        <div v-show="check_color == 3">
            <div>
                这里是市级的内容
            </div>
        </div>

        <div v-show="check_color == 4">
            <div>
                这里是区级的内容
            </div>
        </div>
      </div>

    </div>

    </scroller>
  </commonPage>
</template>
<script>
import commonPage from "../components/common/commonPage";
export default {
  name: "guanli1",
  data() {
    return {
      check_color:1,
      obj1:[
          {
            cun:"鹿城区七都街道樟里村",
          },{
            cun:"鹿城区七都街道樟里村",
          },{
            cun:"鹿城区七都街道樟里村",
          },{
            cun:"鹿城区七都街道樟里村",
          }
      ],
      obj2:[
          {
            weiyuan:"中共温州市纪律检查委员会(温州市检查委员会)",
          },{
            weiyuan:"中共温州市纪律检查委员会(温州市检查委员会)",
          },{
            weiyuan:"中共温州市纪律检查委员会(温州市检查委员会)",
          },{
            weiyuan:"中共温州市纪律检查委员会(温州市检查委员会)",
          }
      ],
      obj3:[
          {
            zhongxue:"浙江省温州中学",
          },{
            zhongxue:"浙江省温州中学",
          },{
            zhongxue:"浙江省温州中学",
          },{
            zhongxue:"浙江省温州中学",
          }
      ],

    };
  },
  created() {
    
  },
  components: {
    commonPage,
  },
  methods: {
    check_num:function(index){
        this.check_color = index
    }
    
  },

};
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.all{
    width: 100%;
}
.top{
    width: 100%;
    height: 2.50rem;
    display: flex;
    line-height: 2.50rem;
    text-align: center;
    border-bottom: 1px solid #d8e1e7;
}
.aa{
    width: 25%;
    background: white;
    color: #36434c;
}
.checked{
  background: #0282e0;
  color: white;
}
.content{
    background: #f8fafb;
}
.guojia{
    width: 100%;
}
.cunzhen{
    padding: 0px 1rem;
    background: white;
}
.title{
    height: 2.50rem;
    display: flex;
}
.xian{
    margin: auto 0;
    width: 0.05rem;
    height: 0.85rem;
    background: #0282e0;
}
.title > p{
    line-height: 2.50rem;
    padding-left: 0.3rem;
}
.text{

}
.one{
    height: 2rem;
    border-bottom: 1px solid #dee6eb;
    display: flex;
    line-height: 2rem;
    color: #013b65;
    font-size: 0.85rem;
}
.img{
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.1rem;
    margin-top: 0.25rem;
}
.more{
    height: 2.50rem;
    text-align: center;
    line-height: 2.50rem;
    font-size: 0.55rem;
    color: #7d8a93;
}
.bumen{
    margin-top: 1rem;
    padding: 0px 1rem;
    background: white;
}
.xiaoyuan{
    margin-top: 1rem;
    padding: 0px 1rem;
    background: white;
}
.button1{
    margin-top: 1rem;
    padding: 1rem;
    background: white;
    color: white;
    font-size: 0.85rem;
}
.button1-shenqing{
    margin: 0 auto;
    width: 75%;
    height: 3rem;
    line-height: 3rem;
    background: #1b8ee2;
    border-radius: 3px;
    display: flex;
}
.button1-download{
    margin: 0 auto;
    margin-top: 0.85rem;
    width: 75%;
    height: 3rem;
    line-height: 3rem;
    background: #1b8ee2;
    border-radius: 3px;
    display: flex;
}
.button1-shenqing > div{
    margin: 0 auto;
    display: flex;
}
.button1-shenqing > div > div{
    width: 1.5rem;
    margin-top: 0.45rem;
}
.button1-shenqing > div > p{
    padding-left: 0.2rem;
}
.button1-download > div{
    margin: 0 auto;
    display: flex;
}
.button1-download > div > div{
    width: 1.5rem;
    margin-top: 0.45rem;
}
.button1-download > div > p{
    padding-left: 0.2rem;
}



</style>